<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="applicable-device" content="mobile">
	<title>购物车</title>
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/cart.css">
	<script type="text/javascript" src="js/zepto.min.js"></script>
  	
</head>
<body>
	<div class="container">
		<div class="topbar">
			<i class="fa fa-angle-left"></i>
			<h1>全部货品</h1>
		</div>
		<form action="#" >	
		<div class="cart">
			<div class="cart-item">
				<div class="cart-up">
					<input type="checkbox" class="check">
					<span>商家名称显示</span>
					<a href="#" class="fa fa-trash-o"></a>
				</div>
			</div>
			
			<div class="buy_up">
					<div class="proimg" style="background:url(img/goods.png) no-repeat;background-size: cover;"></div>
					<div class="buymain">
						<h1>标题文字区域标题文字区域标题文字区域描述文字区域分段显示最多两行 描述文字区域分段显示最多两行</h1>
						<span class="up">规格：橙色</span>
						<span class="down">￥<strong>1.95</strong></span>
					</div>
			</div>

			<div class="buy_down">
				<div class="down_left">
					<input type="checkbox" class="downcheck">
					<span>数量1000</span>
				</div>
				<div class="unit_amount">
						<a href="javascript:void(0);" class="amount_down fa fa-minus"></a>
						<input type="text" id="" name="" value="1" class="amount_input">
						<a href="javascript:void(0);" class="amount_up fa fa-plus"></a>
				</div>
			</div>
		</div>



		<div class="cart">
			<div class="cart-item">
				<div class="cart-up">
					<input type="checkbox" class="check">
					<span>商家名称显示</span>
					<a href="#" class="fa fa-trash-o"></a>
				</div>
			</div>
			
			<div class="buy_up">
					<div class="proimg" style="background:url(img/goods.png) no-repeat;background-size: cover;"></div>
					<div class="buymain">
						<h1>标题文字区域标题文字区域标题文字区域描述文字区域分段显示最多两行 描述文字区域分段显示最多两行</h1>
						<span class="up">规格：橙色</span>
						<span class="down">￥<strong>1.95</strong></span>
					</div>
			</div>

			<div class="buy_down">
				<div class="down_left">
					<input type="checkbox" class="downcheck">
					<span>数量1000</span>
				</div>
				<div class="unit_amount">
						<a href="javascript:void(0);" class="amount_down fa fa-minus"></a>
						<input type="text" id="black" name="" value="1" class="amount_input">
						<a href="javascript:void(0);" class="amount_up fa fa-plus"></a>
				</div>
			</div>
		</div>
		

		<div class="cart">
			<div class="cart-item">
				<div class="cart-up">
					<input type="checkbox" class="check">
					<span>商家名称显示</span>
					<a href="#" class="fa fa-trash-o"></a>
				</div>
			</div>
			
			<div class="buy_up">
					<div class="proimg" style="background:url(img/goods.png) no-repeat;background-size: cover;"></div>
					<div class="buymain">
						<h1>标题文字区域标题文字区域标题文字区域描述文字区域分段显示最多两行 描述文字区域分段显示最多两行</h1>
						<span class="up">规格：橙色</span>
						<span class="down">￥<strong>1.95</strong></span>
					</div>
			</div>

			<div class="buy_down">
				<div class="down_left">
					<input type="checkbox" class="downcheck">
					<span>数量1000</span>
				</div>
				<div class="unit_amount">
						<a href="javascript:void(0);" class="amount_down fa fa-minus"></a>
						<input type="text" id="black" name="" value="1" class="amount_input">
						<a href="javascript:void(0);" class="amount_up fa fa-plus"></a>
				</div>
			</div>
		</div>


		</form>


		<form action="">
			
			<div class="cartbar">
				<div class="cartbar_btn">
					<input type="checkbox" class="allcheck" id="allcheck">
					<label for="allcheck">全选</label>
				</div>
				<div class="cartbar_btn">
					<span>货款合计<i>￥</i><strong>0.00</strong></span>
					<span>(不含运费)</span>
				</div>
				<div class="cartbar_btn">
					结算(29)
				</div>
			</div>
		</form>

	</div>

	<script type="text/javascript">
		$(function(){
			$(".fa-angle-left").click(function(){
				window.history.back(-1); 
			});



			$(".amount_down").click(function(){

		    	var $input = $(this).parent().find("input");
		    	if($input.val()>0){
		    		$input.val(parseInt($input.val())-1);
		    	}
		    	totalmoney();
		    });

		    $(".amount_up").click(function(){

		    	var $input = $(this).parent().find("input");
		    	$input.val(parseInt($input.val())+1);
		    	totalmoney();
		    });

		    $(".check").click(function(){

		    	var $money = 0;
		    	if($(this).is(':checked')){
		    		$(this).attr("checked",true);
		    	
		    		totalmoney();
			    		

		    	}else{
		    		$(this).attr("checked",false);
		    		$(".cartbar_btn strong").text(0);
		    		totalmoney();
		    		var $parent = $(this).parent().parent().parent();
			    	$parent.find(".downcheck").attr("checked",false);
			    	$parent.find(".amount_input").val(1);
		    	}
		    });

		    $(".downcheck").click(function(){

		    	if($(this).is(':checked')){
		    		val = $(".amount_input").val();	
		    		$(this).attr("checked",true);
		    		$(this).parent().parent().find(".amount_input").val(1000);
		    		totalmoney();
		    	}else{
		    		$(this).attr("checked",false);
		    		$(this).parent().parent().find(".amount_input").val(1);
		    		totalmoney();
		    	}
		    });

		    $(".allcheck").click(function(){
 				
 				var $money=0;
		    	if ($(this).is(':checked')){
			    	$(".check").each(function(){

			    		$(this).attr("checked",true);
			    		var price = $(this).parent().parent().parent().find(".down strong").html();
			    		var num = $(this).parent().parent().parent().find(".amount_input").val();			    		
			    		$money += parseFloat(price)*parseFloat(num);
			    		$(".cartbar_btn strong").text($money);
			    	});
				}else{

					$(".check").each(function(){

			    		$(this).attr("checked",false);
			    		$(".cartbar_btn strong").text(0);

			    	});
				}

		    });

		    $(".amount_input").change(function(){
		    	totalmoney();
		    });


		})

	function totalmoney(){

		$money = 0;
		$(".check[checked=true]").each(function(){
			var price = $(this).parent().parent().parent().find(".down strong").html();
			var num = $(this).parent().parent().parent().find(".amount_input").val();			    		
			$money += parseFloat(price)*parseFloat(num);
			$(".cartbar_btn strong").text($money.toFixed(2));
				    		
		});
		
	}
	</script>
</body>
</html>